<template>
  <div class="popup">
    <el-dialog
      :ref="popObj.popName"
      :title="popObj.dialogTitle"
      :visible.sync="popObj.dialogVisible"
      :width="popObj.popupWidth"
      :before-close="handleClose"
    >
      <div class="detail">
        <el-col>
          <h4>基础情况</h4>
          <el-row class="detail">
            <div class="mbottom">执法对象：</div>
            <span style="width: 200px">{{ detailForm.lawTargetName }}</span>
          </el-row>
          <el-row class="detail">
            <div class="mbottom">所在矿：</div>
            <span style="width: 200px">{{ detailForm.mineAddress }}</span>
          </el-row>
          <el-row class="detail">
            <div class="mbottom">计分项：</div>
            <span style="width: 200px">{{ detailForm.mineScoreText }}</span>
          </el-row>
          <el-row class="detail">
            <div class="mbottom">计分值：</div>
            <span style="width: 200px">{{ detailForm.mineScore }}</span>
          </el-row>
          <el-row class="detail">
            <div class="mbottom">执法时间：</div>
            <span style="width: 200px">{{ detailForm.updateTime }}</span>
          </el-row>
          <el-row class="detail">
            <div class="mbottom">执法人：</div>
            <span>{{ detailForm.lawMan }}</span>
          </el-row>
        </el-col>
        <el-col>
          <h4>执法凭证</h4>
          <div v-if="popObj.dialogTitle === '执法详情'">
            {{ detailForm.lawDetail }}
          </div>
          <el-input
            v-else
            v-model="detailForm.voucher"
            clearable
            placeholder="请输入"
          ></el-input>
          <el-image
            :src="detailForm.lawFile"
            class="img"
            v-if="detailForm.lawFile"
            fit="contain "
          />
        </el-col>
      </div>
    </el-dialog>
  </div>
</template>
            
  <script>
export default {
  name: "Index",
  components: {},
  props: {
    popObj: {
      type: Object,
      require: true,
    },
    detailForm: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      imgSrc: "",
      url: "http://10.136.15.42:8080/",
    };
  },
  mounted() {
  },
  methods: {
    popCancel() {
      this.$emit("cancelPop");
    },
    popConfirm() {
      this.$emit("confirmPop");
    },
    handleClose() {
      this.$emit("cancelPop");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
            
  <style lang="scss">
.popup {
  width: 550px;
  .el-dialog {
    z-index: 10000;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(17, 130, 251, 0.5);
    border-radius: 5px;
    margin-top: 10% !important;
  }
  .el-dialog__header {
    width: 100%;
    height: 50px;
    line-height: 38px;
    border-bottom: 1px solid #f6f7f9;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 16px;
    position: relative;
    z-index: 10;
  }
  .el-dialog__close.el-icon.el-icon-close {
    font-size: 22px;
    width: 17px;
    height: 17px;
  }
  .el-button.el-button--default {
    width: 88px;
    color: #1182fb;
    border: 1px solid #1182fb;
  }
  .el-button.el-button--primary {
    width: 88px;
  }
  .el-dialog__body {
    padding: 24px 32px;
    box-sizing: border-box;
  }
  .el-dialog__headerbtn {
    top: 16px;
  }
  .el-dialog__title {
    color: #3c4354;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    line-height: 50px;
  }
  .el-icon-folder-add {
    color: #1948f5;
    font-size: 18px;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
  }
  .detail {
    display: flex;
  }
  .widthHalf {
    width: 50%;
  }
  .mbottom {
    margin-bottom: 10px;
    width: 80px;
  }
  .img {
    width:300px;
    height: 300px;
    margin-top: 10px;
  }
}
</style>
            
            